<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-calendar"></i> 商品管理
				</el-breadcrumb-item>
				<el-breadcrumb-item>添加商品</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="form-box">
				<el-form ref="goodFormRef" :rules="goodRules" :model="goodForm" label-width="80px">
					<el-form-item label="商品名称" prop="goods_name">
						<el-input v-model="goodForm.goods_name"></el-input>
					</el-form-item>
					<el-form-item label="商品分类" prop="cat_id">
						<el-select v-model="goodForm.cat_id" placeholder="请选择商品分类">
							<el-option :key="index" v-for="(item,index) in cateLists" :label="item.cat_name"
								:value="item.cat_id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品价格" prop="goods_price">
						<el-input v-model="goodForm.goods_price"></el-input>
					</el-form-item>
					<el-form-item label="商品数量" prop="goods_number">
						<el-input v-model="goodForm.goods_number"></el-input>
					</el-form-item>
					<el-form-item label="商品图片" prop="picture">
						<el-upload class="upload-demo" drag
							action="https://cache.iminutes.cn/api/vuebacker/uploadavatar.html" multiple
							:on-success="handleUploadSuccess">
							<i class="el-icon-upload"></i>
						</el-upload>
						<div class="imgview">
							<img :src="goodForm.picture" alt="" v-if="goodForm.picture!=''">
							<img src="../../assets/img/img.jpg" alt="" v-if="goodForm.picture==''">
						</div>
					</el-form-item>
					<el-form-item label="商品介绍" prop="goods_introduce">
						<el-input type="textarea" rows="5" v-model="goodForm.goods_introduce"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">表单提交</el-button>
						<el-button @click="onReset">重置表单</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		reactive,
		ref
	} from "vue";
	import {
		ElMessage
	} from "element-plus";
	import {
		dbGetCates
	} from '../../api/category'
	import {
		dbAddGood
	} from '../../api/good'
	import {
		useRouter
	} from "vue-router";
	export default {
		name: "goodform",
		setup() {
			const router = useRouter();
			//自定义校验规则
			var checkPrice = (rule, value, callback) => {
				const regPrice = /\d{1,10}(\.\d{1,2})?$/
				if (!regPrice.test(value)) {
					return callback(new Error('请输入合法价格!'))
				}
				if (parseFloat(value) <= 0) {
					return callback(new Error('请输入>0的商品价格!'))
				}
				callback();
			}
			var checkGoodNumber = (rule, value, callback) => {
				const regPrice = /^[1-9]\d*$/
				if (!regPrice.test(value)) {
					//合法邮箱
					return callback(new Error('请输入>0的商品数量!'))
				}
				callback();
			}
			//校验规则
			const goodRules = {
				goods_name: [{
					required: true,
					message: '请输入商品名称!',
					trigger: 'blur'
				}],
				cat_id: [{
					required: true,
					message: '请选择商品分类!',
					trigger: 'blur'
				}],
				goods_price: [{
					required: true,
					message: '请输入合法价格!',
					trigger: 'blur'
				}, {
					validator: checkPrice,
					trigger: 'blur'
				}],
				goods_number: [{
					required: true,
					message: '请输入合法数量!',
					trigger: 'blur'
				}, {
					validator: checkGoodNumber,
					trigger: 'blur'
				}],
				picture: [{
					required: true,
					message: '请上传图片!',
					trigger: 'blur'
				}],
				goods_introduce: [{
					required: true,
					message: '请输入商品介绍!',
					trigger: 'blur'
				}]
			}
			const goodFormRef = ref(null);
			//定义商品数据
			const goodForm = reactive({
				goods_name: '',
				cat_id: '',
				goods_price: '',
				goods_number: '',
				goods_introduce: '',
				picture: ''
			})

			//定义响应式对象
			const cateLists = ref([])
			//获取商品分类
			const getCateLists = async () => {
				const {
					status,
					msg,
					data
				} = await dbGetCates({})
				if (status == 200) {
					cateLists.value = data
				} else {
					this.$message({
						message: '分类数据异常!',
						type: 'warning'
					});
				}
			}
			getCateLists()

			//上传图片方法
			const handleUploadSuccess = (data) => {
				console.log('数据::', data)
				//更新数据
				goodForm.picture = data.url
			}
			//提交
			const onSubmit = () => {
				// 表单校验
				goodFormRef.value.validate(async (valid) => {
					if (valid) {
						console.log(goodForm);
						//发送ajax
						const {
							status,
							msg,
							data
						} = await dbAddGood(goodForm)
						if (status == 200) {
							ElMessage.success("添加成功!");
							//跳转到列表
							router.push('/goods')
						} else {
							ElMessage.error("添加失败！");
						}
					} else {
						return false;
					}
				});
			};
			// 重置
			const onReset = () => {
				goodFormRef.value.resetFields();
			};

			return {
				goodRules,
				goodFormRef,
				goodForm,
				onSubmit,
				onReset,
				cateLists,
				handleUploadSuccess
			};
		},
	};
</script>
<style>
	.imgview img {
		width: 150px;
		height: 100px;
		margin-left: 100px;
	}
</style>
